import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';
import { getImgUrl } from '../../../../utils/ComFunction'
import Constant from '../../../../utils/Constant'//全局变量
import AsyncImage from '../../../../components/image/AsyncImage';


export default class CarCompanyBox extends Component {

    render() {
        return (
            <TouchableOpacity
                style={styles.container}
                activeOpacity={0.8}
                onPress={() => {
                    this.props.navigation.navigate('CompanyDetailPage', {merchantId: this.props.data.merchantId, isFranchisee: this.props.data.isFranchisee, isJoinCar: this.props.isJoinCar})
                }}
            >
                <AsyncImage style={styles.merchantImg} source={{ uri: getImgUrl(this.props.data.merchantLogoPic) }} defaultSource={require('source/image/comm/sc_default.png')}/>
                <View style={styles.merchantInfo}>
                    <Text style={styles.companyText}>{this.props.data.merchantAbbreviation ? this.props.data.merchantAbbreviation : (this.props.data.merchantName ? this.props.data.merchantName : '暂未填写商家名称')}</Text>
                    {
                        this.props.data.isScBrand == '1' || this.props.data.authenCode == '1' || this.props.data.isMarginMerchant == '1' ?
                            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 8 }}>
                                {
                                    this.props.data.isMarginMerchant == '1' ?
                                        <Image style={{ width: 50, height: 16, marginRight: 10 }} source={require('source/image/deposit_icon.png')} />
                                        :
                                        null
                                }
                                {
                                    this.props.data.isScBrand == '1' ?
                                        <Image style={{ width: 50, height: 16, marginRight: 10 }} source={require('source/image/brand_icon.png')} />
                                        :
                                        null
                                }
                                {
                                    this.props.data.authenCode != '' ?
                                        <Image style={{ width: 60, height: 16, marginRight: 10 }} source={require('source/image/auth_icon.png')} />
                                        :
                                        null
                                }
                            </View>
                            :
                            null
                    }

                    {
                        (this.props.data.isFranchisee == 1 || this.props.data.memberClass == 40) ? (
                            <View style={styles.merchantInfoBox}>
                                <Text style={styles.merchantInfoText}>
                                    {this.props.data.isFranchisee == 1 ? '帅车服务中心' : '严选商城'}
                                </Text>
                            </View>
                        ) : null
                    }

                    <Text style={styles.addressText}>
                        {(this.props.data.provinceName ? this.props.data.provinceName : '') + (this.props.data.cityName ? this.props.data.cityName : '') + (this.props.data.districtName ? this.props.data.districtName : '') + (this.props.data.address ? this.props.data.address : '')}
                    </Text>
                </View>

                <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />

            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        marginHorizontal: 8,
        borderRadius: 6,
        paddingVertical: 12,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        paddingHorizontal: 16,
    },
    merchantImg: {
        width: 54,
        height: 54,
        borderRadius: 27,
    },
    merchantInfo: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        marginLeft: 15,
    },
    companyText: {
        fontSize: 16,
        color: '#333',
        fontWeight: '500',
    },
    addressText: {
        fontSize: 12,
        color: '#666',
        marginTop: 5,
        lineHeight: 16
    },
    arrowImg: {
        width: 15,
        height: 15,
    },

    merchantInfoBox: {
        borderWidth: 1,
        borderColor: '#A411D1',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 4,
        paddingHorizontal: 8,
        marginTop: 5
    },
    merchantInfoText: {
        fontSize: 14,
        color: '#A411D1'
    },

})